<template>
    <div>

        <button @click="jiaoJuan()" v-btn>交卷</button><br>
        您的答案：
        {{daAn}}

        <h1>单选</h1>
        <ul>
            <li v-for="(item, index) in singleQusList" :key="item.id">
                <h3>
                    {{ item.id }}. {{ item.title }}
                </h3>
                您的选择：
                {{item.ans}}
                <ul>
                    <li v-for="(v, i) in item.selectOptions" :key="item.id+''+i"> 
                        <input type="radio" :id="item.id+''+i" v-model="item.ans" :value="v.num">
                        <label :for="item.id+''+i">{{ v.num }}. {{ v.title }}</label>
                    </li>
                </ul>
            </li>
        </ul>

        
        <h1>多选</h1>
        <ul>
            <li v-for="(item, index) in mulQussList" :key="item.id">
                <h3>
                    {{ item.id }}. {{ item.title }}
                </h3>
                您的选择：
                {{item.ans}}
                <ul>
                    <li v-for="(v, i) in item.selectOptions" :key="item.id+''+i"> 
                        <input type="checkbox" :id="item.id+''+i" v-model="item.ans" :value="v.num">
                        <label :for="item.id+''+i">{{ v.num }}. {{ v.title }}</label>
                    </li>
                </ul>
            </li>
        </ul>


    </div>
</template>
<script>
export default {
    data() {
        return {
             // 单选
        singleQusList:[
          {
            id:1,
            title:'1+1等于几',
            selectOptions:[
              {title:'1',num:'A'},
              {title:'2',num:'B'},
              {title:'3',num:'C'},
              {title:'4',num:'D'},
            ],
            ans:'',
          },
          {
            id:2,
            title:'12345679*8等于几',
            selectOptions:[
              {title:'123456789',num:'A'},
              {title:'98765432',num:'B'},
              {title:'128742344',num:'C'},
              {title:'936487234',num:'D'},
            ],
            ans:'',
          }
        ],

        // 多选
        mulQussList:[
              {
                id:3,
                title:'1+1小于几',
                selectOptions:[
                  {title:'1',num:'A'},
                  {title:'2',num:'B'},
                  {title:'3',num:'C'},
                  {title:'4',num:'D'},
                ],
                ans:[],
              },
              {
                id:4,
                title:'12345679*8大于几',
                selectOptions:[
                  {title:'123456789',num:'A'},
                  {title:'98765432',num:'B'},
                  {title:'1287423',num:'C'},
                  {title:'93648723',num:'D'},
                ],
                ans:[],
              },
            ],
            daAn:'',
        }
    },
    methods: {
        jiaoJuan(){
            let arr1 = this.singleQusList.map((v,i)=>{
                return (i+1)+`、`+v.ans
            })
            this.daAn = arr1.join(' ')
        }
    },

}
</script>
<style lang="">
    
</style>